<template>
  <!-- Tradingview提醒 -->
  <div class="all" v-if="data">
    <scroller class="scroller" ref="scroller" resize="none">
      <div class="wrapper">
        <div class="row mt30 mb20 acenter">
          <text class="font30 text2 all">WEBHOOK URL</text>
          <text class="font28 main-t1" @click="learnClick">{{T('使用教程')}}</text>
        </div>
        <div class="itemBg row acenter mb20">
          <text class="font28 text3 all mr10">{{ data.tradingviewUrl }}</text>
          <div class="lineBg width1 height60"></div>
          <div class="copy-img-bg">
            <LImage class="copy-img" :src="Config.img('ic_ai_copy.png')" @click="copyUrl"></LImage>
          </div>
        </div>
        <text class="warning-t1 font24 mb40">{{ T('*请勿将自己的Webhook 链接分享给他人,否则可能收到虚假/诈骗信息。')}}</text>
        <text class="font28 text3 mb20">{{T('提醒方式')}}</text>
        <VCheck class="mb40" :menus="alertTypes" :selTypes="selAlertTypes" @checkClick="onAlertTypeSel" />

        <div class="itemBg mb20">
          <text class="font36 fontz text2 mb20 mr20">{{ T('Tradingview提醒功能用途') }}</text>
          <text class="font24 text3 mr20">{{ T('您在Tradingview设置的预警可以通过VtradiAPP,Tegegram bot和电话的方式通知到您,助您抓住每一次大行情') }}</text>
        </div>

        <div class="itemBg mb20">
          <text class="font36 fontz text2 mb20 mr20">{{ T('如何使用Vtrding进行推送') }}</text>
          <text class="font24 text3 mr20">{{ T('1.在本页面复制 [Webhook URL]\n\n在 TradingView 设置预警时，2.将 [Webhook URL] 填入 Webhook 输入框\n\n填写完成后，3.TradingView 设置的预警触发后，预警消息将会通过您选中的提醒方式通知到您。\n\n') }}</text>
        </div>
      </div>
    </scroller>
    <div class="bottom">
      <div class="but main1" @click="onSave">
        <text class="font36 text1">{{T('保存')}}</text>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .scroller {
    display: flex;
    flex-direction: column;
  }
  .wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 30px;
  }
  .itemBg {
    flex-direction: column;
    padding-left: 30px;
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: #151a2a;
    border-radius: 8px;
  }
  .copy-img-bg {
    width: 114px;
    justify-content: center;
    align-items: center;
  }
  .lineBg {
    background-color: #252a4d;
  }
  .copy-img {
    width: 42px;
    height: 42px;
  }
  .bottom {
    height: 140px;
    flex-direction: column;
    margin-bottom: 40px;
  }
  .but {
    align-items: center;
    justify-content: center;
    margin: 20px 30px;
    height: 88px;
    border-radius: 16px;
  }
</style>

<script>
  import VCheck from "@/aide/view/VCheck.vue";
  import jconfig from "@/_js/config";
  import jmodal from "@/_js/modal";
  import jdebug from "@/_js/debug";
  import jhttps from "@/_js/https";
  import jnavigator from "@/_js/navigator";
  const clipboard = weex.requireModule("clipboard");

  const animation = weex.requireModule("animation"); //动画
  const domModule = weex.requireModule("dom");
  const stream = weex.requireModule("stream"); //网络请求
  const weexFunction = weex.requireModule("WeexFunction");
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;
  weexFunction.setTitle(T("Tradingview提醒"));
  export default {
    components: {
      VCheck,
    },

    data() {
      return {
        Config: jconfig,
        T: T,
        data: undefined,
        alertTypes: [
          {
            name: T("APP提醒"),
            type: "app",
          },
          {
            name: T("Telegram提醒"),
            type: "tg",
          },

          {
            name: T("电话提醒"),
            type: "phone",
          },
        ],
        selAlertTypes: [],
      };
    },

    created() {
      let isIos = weex.config.env.platform.toUpperCase() != "ANDROID";
      if (!isIos) {
        this.alertTypes = [
          {
            name: T("Telegram提醒"),
            type: "tg",
          },
          {
            name: T("电话提醒"),
            type: "phone",
          },
        ];
      }
    },

    mounted() {
      this.httpLoadData();
    },

    methods: {
      /********************************** HTTPS*/
      httpLoadData() {
        var param = {};
        jhttps.post("indicator/getTradingViewUrl", param, true, (data) => {
          jmodal.hideLoad();
          if (data.status == 200) {
            this.data = data.data;

            // this.selAlertTypes = [];
            // if (this.data.appNotification) {
            //   this.selAlertTypes.push(this.alertTypes[0].type);
            // }
            // if (this.data.tgNotification) {
            //   this.selAlertTypes.push(this.alertTypes[1].type);
            // }
            // if (this.data.phNotification) {
            //   this.selAlertTypes.push(this.alertTypes[2].type);
            // }

            console.log(data);
          } else {
            jmodal.toast(data.msg);
          }
        });
      },

      /********************************** 点击*/
      learnClick() {
        weexFunction.showWebUrl(this.data.guideUrl);
      },
      copyUrl() {
        jmodal.toast({ message: T("复制成功"), duration: 2 });
        clipboard.setString(this.data.tradingviewUrl);
      },
      onAlertTypeSel(item) {
        let index = this.selAlertTypes.indexOf(item.type);
        if (index == -1) {
          this.selAlertTypes.push(item.type);
        } else {
          this.selAlertTypes.splice(index, 1);
        }
      },
      onSave() {
        let param = {
          remark: this.data.tradingviewUrl,
          randomCode: this.data.randomCode
        };
        //预警方式
        if (this.selAlertTypes.includes("app")) {
          param.appNotification = true;
        } else {
          param.appNotification = false;
        }
        if (this.selAlertTypes.includes("tg")) {
          param.tgNotification = true;
        } else {
          param.tgNotification = false;
        }
        if (this.selAlertTypes.includes("phone")) {
          param.phNotification = true;
        } else {
          param.phNotification = false;
        }
        jmodal.showLoad();
        jhttps.postX(
          "indicator/createUserTradingViewIndicator",
          param,
          true,
          (data) => {
            jmodal.hideLoad();
            if (data.status == 200) {
              jmodal.toast(T('保存成功'));
              jnavigator.back();
            } else {
              jmodal.toast(data.msg);
            }
          }
        );
      },
    },
  };
</script>